<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在表格页脚添加自定义计算</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>在表格页脚添加自定义计算</h1>
  <div id="spreadsheet"></div>
</body>
<script>
  var data = [
    ['Cheese', 10, 6.00, "=B1*C1"],
    ['Apples', 5, 4.00, "=B2*C2"],
    ['Carrots', 5, 1.00, "=B3*C3"],
    ['Oranges', 6, 2.00, "=B4*C4"],
  ];

  // A custom method to SUM all the cells in the current column

  var SUMCOL = function (instance, columnId) {
    var total = 0;
    for (var j = 0; j < instance.options.data.length; j++) {
      if (Number(instance.records[j][columnId - 1].innerHTML)) {
        total += Number(instance.records[j][columnId - 1].innerHTML);
      }
    }
    return total;
  }

  var table = jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    minDimensions: [4, 10],
    columnDrag: true,
    footers: [['Total', '=SUMCOL(TABLE(), COLUMN())', '=SUMCOL(TABLE(), COLUMN())', '=SUMCOL(TABLE(), COLUMN())']],
    columns: [{
      width: '200px',
    }]
  });
</script>

</html>